<template>
    <div>
        <table>
            <thead>
                <tr>
                    <th><input type="checkbox" :checked="isSelectAll"  @click="clickIsSelectAll(isSelectAll)">全选/全不选</th>
                    <th>书籍名称</th>
                    <th>出版日期</th>
                    <th>价格</th>
                    <th>数量</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in books" :key="item.id">
                    <td> <input type="checkbox" v-model="item.isSelected"> </td>
                    <td>{{item.name}}</td>
                    <td>{{item.date}}</td>
                    <td>{{item.price}}</td>
                    <td> <button @click="add(index)">+</button> {{item.num}} <button @click="sub(index)">-</button> </td>
                    <td><button @click="del(index)">删除</button></td>
                </tr>
                <tr>
                    <td colspan="6">总价格{{totalPrice | keyTwo}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
    import {
        mapState,
        mapGetters,
        mapMutations
    } from 'vuex'
    export default {
        data() {
            return {

            };
        },
        computed: {
            ...mapState({
                books: state => state.shopCart.books
            }),
            ...mapGetters({
                totalPrice: 'shopCart/totalPrice',
                isSelectAll: 'shopCart/isSelectAll'
            })
        },
        methods: {
            ...mapMutations({
                add: 'shopCart/add',
                sub: 'shopCart/sub',
                del: 'shopCart/del',
                clickIsSelectAll: 'shopCart/clickIsSelectAll'
            })
        },
        filters: {
            keyTwo(val) {
                return val.toFixed(2)
            }
        },
    };
</script>

<style scoped lang="less">
    table {
        width: 600px;
        margin: 10px auto;
        border: 1px solid #ddd;
        border-collapse: collapse;
        color: #666;
        font-size: 14px;
    }

    table th {
        width: 100px;
        border: 1px solid #ddd;
    }

    table tr {
        height: 70px;
    }

    table td {
        padding-left: 10px;
        border: 1px solid #ddd;
    }

    button {
        height: 30px;
        padding: 0 10px;
        color: #fff;
        text-align: center;
        border-radius: 4px;
        border: none;
        background-color: #87CEEB;
    }

    .seatchContainer {
        color: #666;
        font-size: 14px;
        text-align: center;
    }

    .seatchContainer input {
        margin: 0 30px;
        height: 30px;
        width: 200px;
        border: 1px solid #ddd;
        border-radius: 4px;
        outline: none;
    }
</style>